import { defineComponent, ref, onMounted, onUnmounted } from 'vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { GaugeChart } from 'echarts/charts'
import { TitleComponent } from 'echarts/components'
import { MockDataGenerator } from '../utils/mockData'
import type { EChartsOption } from 'echarts'

use([
  CanvasRenderer,
  GaugeChart,
  TitleComponent
])

export default defineComponent({
  name: 'DynamicGauge',
  components: {
    VChart
  },
  props: {
    title: {
      type: String,
      default: 'CPU使用率'
    },
    color: {
      type: String,
      default: '#ff4444'
    }
  },
  setup(props) {
    const value = ref(MockDataGenerator.randomFloat(20, 90))

    const option = ref<EChartsOption>({
      series: [
        {
          type: 'gauge',
          startAngle: 180,
          endAngle: 0,
          center: ['50%', '70%'],
          radius: '90%',
          min: 0,
          max: 100,
          splitNumber: 10,
          axisLine: {
            lineStyle: {
              width: 12,
              color: [
                [0.3, '#00ff88'],
                [0.7, '#00d4ff'],
                [1, props.color]
              ]
            }
          },
          pointer: {
            icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
            length: '12%',
            width: 20,
            offsetCenter: [0, '-60%'],
            itemStyle: {
              color: 'auto',
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              shadowBlur: 10
            }
          },
          axisTick: {
            length: 8,
            lineStyle: {
              color: 'auto',
              width: 2
            }
          },
          splitLine: {
            length: 12,
            lineStyle: {
              color: 'auto',
              width: 3
            }
          },
          axisLabel: {
            color: 'rgba(255, 255, 255, 0.7)',
            fontSize: 12,
            distance: -50,
            formatter: (value: number) => {
              if (value === 0 || value === 50 || value === 100) {
                return value.toString()
              }
              return ''
            }
          },
          title: {
            offsetCenter: [0, '-15%'],
            fontSize: 16,
            color: 'rgba(255, 255, 255, 0.9)',
            fontWeight: 'bold'
          },
          detail: {
            fontSize: 32,
            offsetCenter: [0, '5%'],
            valueAnimation: true,
            formatter: (value: number) => {
              return `${Math.round(value)}%`
            },
            color: props.color,
            fontWeight: 'bold'
          },
          data: [
            {
              value: value.value,
              name: props.title
            }
          ]
        }
      ]
    })

    let timer: number | null = null

    onMounted(() => {
      timer = window.setInterval(() => {
        value.value = MockDataGenerator.randomFloat(20, 90)
        option.value = {
          series: [
            {
              ...option.value.series![0] as any,
              data: [
                {
                  value: value.value,
                  name: props.title
                }
              ]
            }
          ]
        }
      }, 3000)
    })

    onUnmounted(() => {
      if (timer) {
        clearInterval(timer)
      }
    })

    return () => (
      <div class="chart-container">
        <VChart option={option.value} autoresize style="height: 100%; width: 100%;" />
      </div>
    )
  }
})
